import { debounce } from 'common/utils.js'
import BackTop from 'components/content/backTop/BackTop.vue'

/**
 * 实现图片放到GoodsListItem组件中，再次刷新的功能
 */
export const itemListenerMixin = {
  // 混入中可以混入data、components、methods、created、mounted等等
  data() {
    return {
      itemImgListener: null,

    }
  },
  mounted() {
    // 原生的真实dom元素上是有offsetTop这个属性的，但是组件上是没有这个属性的，需要通过$el获取组件的真实dom元素
    // console.log(this.$refs.tabControl.$el.offsetTop);
    const refresh = debounce(this.$refs.scroll.refresh, 50)
    this.itemImgListener = () => {
      // console.log('aaa');
      refresh()
    }
    // 当图片全部加载完成后，再刷新一下，防止图片卡顿的bug
    this.$bus.$on('itemImageLoad', this.itemImgListener)
  },
}

/**
 * 实现回到顶部按钮的混入封装，在使用混入的时候，需要注意同名的冲突
 */
export const backTopMixin = {
  data() {
    return {
      isShowBackTop: false,
    }
  },
  components: {
    BackTop
  },
  methods: {
    backTop() {
      // 点击按钮的时候，调用bs对象的scrollTo方法
      // this.$refs.scroll.scroll.scrollTo(0, 0)  

      // 方法封装后，用下面的，第三个参数是完成回到顶部的时间
      this.$refs.scroll.scrollTo(0, 0, 500)
    },
    // 监听是否显示顶部按钮的函数
    listenShowBackTop(position) {
      this.isShowBackTop = -position.y > 1000
    }
  },
}